<template>
  <el-tabs v-model="activeName" type="card" @tab-click="handleClick">
  <el-tab-pane label="班级课表" name="first">
  <div class="ele-body">
    <el-card
      shadow="never"
      body-style="padding-bottom: 0;">
      <el-row :gutter="15">
        <el-col :lg="4" style="margin-bottom: 15px;">
          <!-- 数据表格 -->
          <ele-pro-table
            ref="table"
            :show-header="false"
            :datasource="url"
            row-key="index"
            :columns="columns"
            height="calc(100vh - 261px)"
            default-expand-all
            :need-page="false"
            :parse-data="parseData"
            :toolkit="[]"
            highlight-current-row
            @row-click="onRowClick"
            :row-class-name="tableRowClassName"
            class="dict-table"
            @done="done">
            <!-- 表头工具栏 -->
            <template slot="toolbar">
              <el-button
                @click="expandAll"
                class="ele-btn-icon"
                size="small">展开全部
              </el-button>
              <el-button
                @click="foldAll"
                class="ele-btn-icon"
                size="small">折叠全部
              </el-button>
            </template>
            <!-- 标题列 -->
            <template slot="name" slot-scope="{row}">
              <i :class="row.icon"></i> {{ row.name }}
            </template>
          </ele-pro-table>
        </el-col>
        <el-col :lg="20" style="margin-bottom: 15px;">
          <!-- 数据项列表 -->
          <curriculum-data v-if="current" :stype="1" :config-id="current.id" type="1"/>
        </el-col>
      </el-row>
    </el-card>
  </div>
  </el-tab-pane>
  <el-tab-pane label="场地课表" name="second">
    <div class="ele-body">
      <el-card
        shadow="never"
        body-style="padding-bottom: 0;">
        <el-row :gutter="15">
          <el-col :lg="4" style="margin-bottom: 15px;">
            <!-- 数据表格 -->
            <ele-pro-table
              ref="table2"
              :show-header="false"
              :datasource="url2"
              row-key="index"
              :columns="columns"
              height="calc(100vh - 261px)"
              default-expand-all
              :need-page="false"
              :parse-data="parseData2"
              :toolkit="[]"
              highlight-current-row
              @row-click="onRowClick2"
              :row-class-name="tableRowClassName"
              class="dict-table"
              @done="done">
              <!-- 表头工具栏 -->
              <template slot="toolbar">
                <el-button
                  @click="expandAll2"
                  class="ele-btn-icon"
                  size="small">展开全部
                </el-button>
                <el-button
                  @click="foldAll2"
                  class="ele-btn-icon"
                  size="small">折叠全部
                </el-button>
              </template>
              <!-- 标题列 -->
              <template slot="name" slot-scope="{row}">
                <i :class="row.icon"></i> {{ row.name }}
              </template>
            </ele-pro-table>
          </el-col>
          <el-col :lg="20" style="margin-bottom: 15px;">
            <!-- 数据项列表 -->
            <curriculum-data v-if="current2" :stype="2" :config-id="current2.id" type="2"/>
          </el-col>
        </el-row>
      </el-card>
    </div>
  </el-tab-pane>
  </el-tabs>
</template>

<script>
import { mapGetters } from "vuex";
import CurriculumData from './curriculum-data';

export default {
  name: 'CurriculumIndex',
  components: {CurriculumData},
  computed: {
    ...mapGetters(["permission"]),
  },
  data() {
    return {
      // 表格数据接口
      url: '/clazz/getCatetreeList',
      url2: '/sitescene/getScenetreeList',
      // 表格列配置
      columns: [
        // {
        //   columnKey: 'index',
        //   type: 'index',
        //   width: 45,
        //   align: 'center',
        //   showOverflowTooltip: true
        // },
        {
          prop: 'name',
          label: '栏目名称',
          showOverflowTooltip: true,
          slot: 'name'
        }
      ],
      activeName: 'first',
      // 当前编辑数据
      current: null,
      // 当前编辑数据
      current2: null,
      // 是否显示编辑弹窗
      showEdit: false,
      // 编辑回显数据
      editData: null,
      // 全部栏目数据
      cateList: []
    };
  },
  methods: {
    tableRowClassName({row}) {
      if (row.banji) {
        return 'dict-table';
      }
      return '';
    },
    /* 解析接口返回数据 */
    parseData(res) {
      res.data = this.$util.toTreeData(res.data, 'index', 'pid');
      // console.log(res.data);
      // this.cateList = res.data;
      return res;
    },
    /* 解析接口返回数据 */
    parseData2(res) {
      res.data = this.$util.toTreeData(res.data, 'index', 'pid');
      // console.log(res.data);
      // this.cateList = res.data;
      return res;
    },
    /* 表格渲染完成回调 */
    done(res,row) {
      if (res.data.length > 0&&row.banji) {
        this.$refs.table.setCurrentRow(res.data[0]);
      }else{
        return false;
        //this.$refs.singleTable.setCurrent();
      }

    },
    /* 刷新表格 */
    reload2() {
      this.$refs.table2.reload();
    },
    /* 表格渲染完成回调 */
    done2(res,row) {
      if (res.data.length > 0&&row.banji) {
        this.$refs.table2.setCurrentRow(res.data[0]);
      }else{
        return false;
        //this.$refs.singleTable.setCurrent();
      }

    },
    /* 刷新表格 */
    reload() {
      this.$refs.table.reload();
    },
    /* 显示编辑 */
    openEdit(row) {
      this.editData = row;
      this.showEdit = true;
    },
    handleClick(tab, event) {
        console.log(tab, event);
      },
    onRowClick(row) {
        if (!row.banji) {
          this.$refs.table.setCurrentRow(this.current);
          // this.current = null;
        }else{
          this.current = row;
        }
        return false;
      },
    onRowClick2(row) {
        if (!row.banji) {
          this.$refs.table2.setCurrentRow(this.current2);
          // this.current = null;
        }else{
          this.current2 = row;
        }
        return false;
      },

    /* 展开全部 */
    expandAll() {
      this.$refs.table.data.forEach(d => {
        this.$refs.table.toggleRowExpansion(d, true);
      });
    },
    /* 折叠全部 */
    foldAll() {
      this.$refs.table.data.forEach(d => {
        this.$refs.table.toggleRowExpansion(d, false);
      });
    },

    /* 展开全部 */
    expandAll2() {
      this.$refs.table2.data.forEach(d => {
        this.$refs.table2.toggleRowExpansion(d, true);
      });
    },
    /* 折叠全部 */
    foldAll2() {
      this.$refs.table2.data.forEach(d => {
        this.$refs.table2.toggleRowExpansion(d, false);
      });
    },
  }
}
</script>

<style scoped>
.dict-table ::v-deep .dict-table {
  cursor: pointer;
}

.dict-table ::v-deep .dict-table > td:last-child:after {
  content: "\e6e0";
  font-family: element-icons !important;
  font-style: normal;
  font-variant: normal;
  text-transform: none;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  line-height: 1;
  position: absolute;
  right: 10px;
  top: 50%;
  margin-top: -7px;
}

.dict-table ::v-deep .el-table__row > td:last-child .cell {
  padding-right: 20px;
}
</style>
